import React from 'react';
import { RefreshCw } from 'lucide-react';
import VisitorCounter from './VisitorCounter';
import PlatformSelector from './PlatformSelector';

const PageHeader = ({ onRefresh, selectedPlatform, onPlatformChange }) => {
  return (
    <header className="relative backdrop-blur-xl border-b border-white/30 shadow-2xl" style={{
      background: 'linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%)'
    }}>
      {/* 装饰性背景 */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
      
      <div className="flex justify-center w-full">
        <div className="w-full max-w-4xl px-6">
          <div className="relative z-10 flex items-center justify-between py-6">
            <div className="flex items-center space-x-4">
              {/* Logo区域 - 豪华版 */}
              <div className="relative">
                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-2xl transform hover:scale-110 hover:rotate-12 transition-all duration-500">
                  {/* 内部光效 */}
                  <div className="absolute inset-1 rounded-xl bg-gradient-to-br from-white/30 to-transparent"></div>
                  <span className="relative z-10 text-white font-black text-2xl drop-shadow-lg">🔥</span>
                </div>
                {/* 装饰光点 */}
                <div className="absolute -top-1 -right-1 w-4 h-4 bg-yellow-400 rounded-full animate-ping"></div>
              </div>
              
              {/* 标题区域 */}
              <div className="flex items-center gap-4">
                <div>
                  <h1 className="text-3xl md:text-4xl font-black bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent drop-shadow-xl">
                    热点追踪
                  </h1>
                  <p className="text-white/80 text-sm md:text-base font-semibold drop-shadow-lg">
                    全网热点实时监控 · 数据驱动洞察
                  </p>
                </div>
                
                {/* 平台选择器 */}
                <div className="flex items-center ml-4">
                  <PlatformSelector 
                    selectedPlatform={selectedPlatform}
                    onPlatformChange={onPlatformChange}
                  />
                </div>
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <VisitorCounter />
              
              {/* 刷新按钮 - 豪华版 */}
              <button 
                onClick={onRefresh}
                className="group relative px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-blue-500/80 to-purple-500/80 backdrop-blur-sm text-white rounded-2xl font-black transition-all duration-500 hover:shadow-2xl hover:scale-110 flex items-center space-x-3 text-sm md:text-base overflow-hidden"
                style={{
                  background: 'linear-gradient(135deg, rgba(59,130,246,0.9) 0%, rgba(147,51,234,0.9) 100%)',
                  boxShadow: '0 10px 30px rgba(59,130,246,0.3), inset 0 1px 0 rgba(255,255,255,0.2)'
                }}
              >
                {/* 按钮内部光效 */}
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
                
                <RefreshCw className="w-5 h-5 md:w-6 md:h-6 group-hover:rotate-180 transition-transform duration-500" />
                <span className="relative z-10">
                  <span className="hidden sm:inline">刷新数据</span>
                  <span className="sm:hidden">刷新</span>
                </span>
                
                {/* 按钮装饰 */}
                <div className="absolute top-1 right-1 w-2 h-2 bg-yellow-300 rounded-full animate-pulse"></div>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {/* 底部装饰线 */}
      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/50 to-transparent"></div>
    </header>
  );
};

export default PageHeader;